<template>
  <div class="homepage">
    <div class="main-img">
      <img src="./img/main.png">
      <div class="mask">
        <p class="title">百思凯 · 让国际食品贸易更简单</p>
        <p class="subtitle">副标题副标题副标题副标题</p>
      </div>
    </div>
    
    <!-- 平台功能介绍 -->
    <v-platform></v-platform>

    <!-- 请选择您的身份 -->
    <v-identity></v-identity>

    <!-- 新闻 -->
    <v-news></v-news>

    <!-- 合作伙伴 -->
    <v-partner></v-partner>
  </div>
</template>

<script>
import Platform from './components/Platform.vue'
import Identity from './components/Identity.vue'
import News     from './components/News.vue'
import Partner  from './components/Partner.vue'
export default {
  name: 'Homepage',
  components: {
    'v-platform': Platform,
    'v-identity': Identity,
    'v-news': News,
    'v-partner': Partner
  },
}
</script>

<style lang="scss" scoped>
.main-img {
  width: 100%;
  position: relative;
  font-size: 0;
  img {
    width: 100%;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
      font-size: .96rem;
      color: #fff;
      font-weight: 500;
      letter-spacing: 5px;
    }
    .subtitle {
      margin-top: .6rem;
      font-size: .72rem;
      color: #fff;
      letter-spacing: 3px;
    }
  }
}
</style>
